import { ref, reactive, onMounted } from 'vue'
import { getList } from '@/ncApi/registerApi'

export const useTableData = () => {
  // 城市列表数据
  const cityList = reactive([
    {
      value: 'New York',
      label: 'New York',
    },
    {
      value: 'London',
      label: 'London',
    },
    {
      value: 'Sydney',
      label: 'Sydney',
    },
    {
      value: 'Ottawa',
      label: 'Ottawa',
    },
    {
      value: 'Paris',
      label: 'Paris',
    },
    {
      value: 'Canberra',
      label: 'Canberra',
    },
  ])
  const search = ref('')
  // 表格相关数据
  const tableList = ref([])
  const currentPage = ref(1)
  const pageSize = ref(10)
  const total = ref(0)

  // 获取表格数据的异步函数
  const getTableList = async () => {
    const res = await getList({ 
      pageNum: currentPage.value, 
      pageSize: pageSize.value,
      search: search.value // 传递搜索关键词
    }) as any
    console.log('res', res.data)
    tableList.value = res.data.list
    total.value = res.data.total
  }

  // 每页数量改变时的处理函数
  const sizeChange = (newSize: any) => {
    console.log(11111)
    pageSize.value = newSize
    getTableList()
  }

  // 当前页码改变时的处理函数
  const currentChange = (newPage: any) => {
    currentPage.value = newPage
    getTableList()
  }

  const pagenation = ref(null)

  onMounted(() => {
    getTableList()
  })

  return {
    cityList,
    search,
    tableList,
    currentPage,
    pageSize,
    total,
    getTableList,
    sizeChange,
    currentChange,
    pagenation
  }
}